<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <link rel="stylesheet" href="./css/common.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        li {
            height: 50px;
            margin-top: 1px;
        }
        
        input {
            height: 35px;
            flex-grow: 1;
            border: 1px solid #ebebeb;
            margin-left: 15px;
            text-indent: 10px;
        }
        
        button {
            margin-top: 50px;
            width: 50px;
            height: 50px;
            background-color: green;
        }
    </style>
</head>

<body>
    <header>
        <a href="./list.html">列表</a>
        <a href="./add.html">添加</a>
    </header>

    <div id="box" class="mt-5">
       
    </div>

    <p class="fcc"> <button class="btn">修改</button></p>

    <script>
        var search=location.search
        var id=search.replace(/\?id=(.*)/,"$1")
        $.ajax({
            url:'http://localhost:8880/detail',
            type:'get',
            data:{
               _id:id
            },
            dataType:'json',
            success:function(res){
                if(res.code==666){
                    var str=`
                    <li class="flex jc-sb aic f18 bg-fff pl-15 pr-5">
                        <span>头像地址:</span> <input value="${res.data.headUrl}" id="avatarUrl" type="text" placeholder="选填">
                    </li>
                    <li class="flex jc-sb aic f18 bg-fff pl-15 pr-5">
                        <span>爱豆名字:</span> <input value="${res.data.name}" id="name" type="text" placeholder="必填">
                    </li>
                    <li class="flex jc-sb aic f18 bg-fff pl-15 pr-5">
                        <span>爱豆年龄:</span> <input value="${res.data.age}" id="age" type="number" placeholder="必填">
                    </li>
                    <li class="flex jc-sb aic f18 bg-fff pl-15 pr-5">
                        <span>爱豆职业:</span> <input value="${res.data.profession}" id="profession" type="text" placeholder="选填">
                    </li>
                    <li class="flex jc-sb aic f18 bg-fff pl-15 pr-5">
                        <span>爱豆作品: </span><input value="${res.data.word}" id="word" type="text" placeholder="选填">
                    </li>
                    `
                    $('#box').html(str)
                }
            },
            error:function(error){
                console.log(error)
            }
        })
        $('.btn').click(function(){
            var headUrl=$('#avatarUrl').val()
            var name=$('#name').val()
            var age=$('#age').val()
            var profession=$('#profession').val()
            var word=$('#word').val()
            $.ajax({
                url:'http://localhost:8880/undata',
                type:'get',
                data:{
                    _id:id,
                    headUrl:headUrl,
                    name:name,
                    age:age,
                    profession:profession,
                    word:word
                },
                dataType:'json',
                success:function(res){
                    if(res.code==666){
                        alert(res.msg)
                        location.href='list.html'
                    }
                },
                error:function(error){
                    console.log(error)
                }
            })
        })
    </script>
</body>

</html>